<template>
  <view>
    <swiper class="swiper" circular indicator-dots="true" autoplay="true" interval="3000" duration="500"
      indicator-active-color="#FFFFFF">
      <swiper-item v-for="item in swiperList" :key="item.id">
        <image class="swiper-image" :src="item.src"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    name:"my-swiper",
    data() {
      return {
        swiperList: [{
            id: 1,
            src: "https://tse2-mm.cn.bing.net/th/id/OIP-C.YDQCeFaP2VqFbbTRxafAXAHaDY?w=308&h=159&c=7&r=0&o=5&dpr=1.4&pid=1.7"
          },
          {
            id: 2,
            src: "https://img.zcool.cn/community/0196485e69a340a8012165180f7c8a.jpg?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp"
          },
          {
            id: 3,
            src: "https://tse2-mm.cn.bing.net/th/id/OIP-C.j36mskPWr7yFZJZSrnioTgHaC2?w=188&h=80&c=7&r=0&o=5&dpr=1.4&pid=1.7"
          },
          {
            id: 4,
            src: "https://tse3-mm.cn.bing.net/th/id/OIP-C.4IBBFBgQOlS2Umlum92AFAHaDt?rs=1&pid=ImgDetMain"
          },
          {
            id: 5,
            src: "https://tse4-mm.cn.bing.net/th/id/OIP-C.8aEOOOzFNnisLlE1yBLGjgHaCp?rs=1&pid=ImgDetMain"
          },
          {
            id: 6,
            src: "https://tse4-mm.cn.bing.net/th/id/OIP-C.gZlYaEkHacYrXcSdPws4RwHaB7?rs=1&pid=ImgDetMain"
          },
          {
            id: 7,
            src: "https://img.tusij.com/qiantu_assets/user_download_ue/2021-06-01/qt_6594937f8cc16833b50720a1c833adc4_85557.jpg?auth_key=2312440276-0-0-b2616029c3d84e35586c90486dc113a4&x-oss-process=image/resize,m_fixed,h_364,w_700"
          },
          {
            id: 8,
            src: "https://tse2-mm.cn.bing.net/th/id/OIP-C.3E1lz4vALuX-JEBBxgveVgHaDF?rs=1&pid=ImgDetMain"
          },{
            id: 9,
            src: "https://img.zcool.cn/community/0105ac5e69a341a8012165189ee0cd.jpg?imageMogr2/auto-orient/thumbnail/1280x%3e/sharpen/0.5/quality/100/format/webp"
          },{
            id: 10,
            src: "https://tse4-mm.cn.bing.net/th/id/OIP-C.Yb0yNovuD8Ocyq2k7yPNyQHaB7?rs=1&pid=ImgDetMain"
          }
        ]
              
      };
    }
  }
</script>

<style>
.swiper {
    height: 300rpx;
    padding: 20rpx;
  }

  .swiper-item {
    display: block;
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    border-radius: 20rpx;
    margin: 0 10rpx;
  }

  .swiper-list {
    margin-top: 40rpx;
    margin-bottom: 0;
  }

  .swiper-image {
    width: 100%;
    height: 100%;
    /* 图片居中 */
    display: block;
    /* 避免默认行内空白 */
  }
</style>